<template>
	<e-modal :show="show" @confirm="handleFinish">
		<view class="app-card-valid-code-popup bg-white e-rela">
			<view class="e-p-b-40 e-flex-items-end e-flex-x-center bg-white" v-if="payMoney">
				<text class="c-red e-font-36">{{$unitEn}}</text>
				<text class="c-red e-font-50">{{payMoney}}</text>
			</view>
			<view>
				<view class="e-flex-xy-center">
					<view class="">
						<e-input customStyle="width:520rpx;height:96rpx;" v-model="password" :placeholder="$t('public.请输入验证码')" ></e-input>
					</view>
				</view>
			</view>
		</view>
	</e-modal>
</template>
<script lang="ts">
	import {
		defineComponent,
		ref,
		watch
	} from 'vue'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {throttle} from '@/common/utils'
	export default defineComponent({
		name: 'password-popup',
		props: {
			show: Boolean,
			payMoney: [String, Number]
		},
		emit: ['confirm','close'],
		setup(props, {
			emit,
			expose
		}) {
			const ctx = useCurrentInstance()
			const password = ref('')
			const handleFinish = throttle(function () {
				
					if(password.value){
						uni.hideKeyboard()
						emit('confirm', password.value)
					}else{
						ctx.$toastApp(ctx.$t('public.请输入验证码'))
					}
					
				
			},1500)
			watch(() => props.show,(v) => {
				v&&(password.value ='')
			})
			return {
				password,
				handleFinish,
			}
		},
	})
</script>


<style scoped lang="scss">
	@include appBem_b(card-valid-code-popup) {
		width: 610rpx;
		border-radius: 20rpx;

		&__close {
			top: 30rpx;
			right: 30rpx;
		}
	}
</style>